<template>
  <div :id="eId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PieEchart',
  props: {
    dataSource: {
      type: Array,
      default() {
        return [
          { value: 1548, name: 'CityE' },
          { value: 735, name: 'CityC' },
          { value: 510, name: 'CityD' },
          { value: 434, name: 'CityB' },
          { value: 335, name: 'CityA' }
        ]
      }
    },
    eId: {
      type: String,
      default() {
        return 'main'
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {},
  mounted() {
    this.init()
    // window.onresize = () => {
    //   myChart.resize()
    // }
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById(this.eId))
      var option = {
        title: {
          text: '200',
          subtext: '总计用量',
          left: '29%',
          top: '43%',
          textAlign: 'center',
          textVerticalAlign: 'middle',
          textStyle: {
            width: 50,
            overflow: 'truncate',
            fontSize: 20
          },
          itemGap: 5,
          subtextStyle: {
            align: 'center',
            verticalAlign: 'middle'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'middle',
          icon: 'circle',
          itemWidth: 10,
          itemGap: 12,

          formatter: name => {
            let params1, params2
            let sum = this.dataSource.reduce((prev, curr) => {
              return prev + curr.value
            }, 0)

            for (let i = 0; i < this.dataSource.length; i++) {
              if (this.dataSource[i].name == name) {
                params1 = ((this.dataSource[i].value / sum) * 100).toFixed(2) + '%'
                params2 = this.dataSource[i].value
              }
            }
            let arr = ['{a|' + name + '}', '{b|' + params1 + '}', '{c|' + params2 + '}']
            return arr.join('')
          },
          textStyle: {
            rich: {
              a: { width: 50, padding: [0, 10, 0, 0], color: '#fff' },
              b: { align: 'left', width: 40, padding: [0, 10, 0, 0], color: '#fff' },
              c: { align: 'left', color: '#fff' }
            }
          },
          data: this.dataSource.map(item => item.name)
        },
        color: ['#029be0', '#2db7f5', '#70d354', '#fedf82', '#4ad2e7'],
        series: [
          {
            type: 'pie',
            radius: '45%',
            center: ['30%', '50%'],
            animation: false,
            silent: true,
            label: {
              show: false
            },
            tooltip: { show: false },
            data: [{ value: 0, itemStyle: { color: '#fff' } }]
          },
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['30%', '50%'],
            label: {
              show: false
            },
            data: this.dataSource
          }
        ]
      }

      option && this.myChart.setOption(option)
      let that = this
      setTimeout(() => {
        that.myChart.resize()
      }, 200)
      window.addEventListener('resize', () => {
        setTimeout(() => {
          that.myChart.resize()
        }, 200)
      })
    }
  },
  watch:{
    dataSource(){
      this.init();
    },
  }
}
</script>